<template>
	<view class="mine-container">
		<view class="content" style="z-index: 2;">
			<view class="guangyun1"></view>
		</view>
		<!--顶部个人信息栏-->
		<view class="header-section bg-gradual-red" style="position: relative;">
			<view class="bg-gradual-red" style="width: 2000rpx;height: 2000rpx;border-radius: 50%;
				margin-left: -1000rpx;margin-top: -1500rpx;position: absolute;z-index: 1;">
			</view>

			<view class="flex padding justify-between" style="z-index: 2;">
				<view class="flex align-center" style="z-index: 2;">
					<view v-if="!phone" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="phone" @click="handleToAvatar" src="@/static/images/my/头像.png"
						class="cu-avatar xl round" mode="widthFix">
					</image>
					<view v-if="!phone" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="phone" @click="handleToInfo" class="user-info">
						<view class="u_title">
							{{ '用户-95278' }}
						</view>
						<view class="">
							手机号：{{ phone }}
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center" style="z-index: 2;">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<view class="content-section " style="z-index: 2;">
			<view class="mine-actions radius40  grid col-3 text-center">
				<view class="action-item" @click="handleJiaoLiuQun">
					<image src="@/static/images/my/零钱.png" style="width: 60rpx;height: 60rpx;"></image>
					<text class="text">零钱</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<image src="@/static/images/my/优惠劵.png" style="width: 60rpx;height: 60rpx;"></image>
					<text class="text">优惠劵</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<image src="@/static/images/my/临时额度.png" style="width: 60rpx;height: 60rpx;"></image>

					<text class="text">贷款额度</text>
				</view>
			</view>
		</view>

		<view class="content-section " style="z-index: 2;">
			<view class="mine-actions radius40  grid col-2 text-center">
				<view class="juzhong" style="display: flex;" @click="handleJiaoLiuQun">
					<image src="@/static/images/my/银行卡-信用卡.png" style="width: 80rpx;height: 80rpx;"></image>
					<text class="text margin-left-sm font-34" style="font-size:30rpx ;">我要贷款</text>
				</view>
				<view class="juzhong" style="display: flex;" @click="handleBuilding">
					<image src="@/static/images/my/账单.png" style="width: 80rpx;height: 80rpx;"></image>
					<text class="text margin-left-sm font-34" style="font-size:30rpx ;">贷款记录</text>
				</view>

			</view>

			<!-- 	<view class="margin-top-lg  font-40" style="font-weight: bold;padding-left: 30rpx;">
				专属客服
			</view>


			<view class="mine-actions radius40 padding-left-lg  grid  ">
				<view class="padding-left-lg">
					<view class="font-34 margin-bottom-xs" style="color: #aa3b2f;font-weight: bold;">您好，有问题请找专属客服</view>

					<view class=" margin-bottom-xs flex" style="color: #aa3b2f;font-weight: 500;">
						<view class="juzhong margin-right-xs">
							<view style="width: 8rpx;height: 8rpx;background-color: #aa3b2f;border-radius: 50%;"
								class="juzhong">
							</view>
						</view>
						短信提示有额度可领取，登上.
					</view>
					<view class=" margin-bottom-xs flex" style="color: #aa3b2f;font-weight: 500;">
						<view class="juzhong margin-right-xs">
							<view style="width: 8rpx;height: 8rpx;background-color: #aa3b2f;border-radius: 50%;"
								class="juzhong">
							</view>
						</view>
						如何提高贷款成功率?
					</view>
					<view class=" margin-bottom-xs flex" style="color: #aa3b2f;font-weight: 500;">
						<view class="juzhong margin-right-xs">
							<view style="width: 8rpx;height: 8rpx;background-color: #aa3b2f;border-radius: 50%;"
								class="juzhong">
							</view>
						</view>
						申请的借款能否循环使用?
					</view>

					<view class="flex margin-top">
						<view class="radius40 padding-xs margin-right-sm font-11 juzhong"
							style="padding: 10rpx 40rpx;background-color: #fff3f3;color: #aa3b2f;font-weight: 700;">
							服务进度</view>
						<view class="radius40 padding-xs margin-right-sm font-11 juzhong"
							style="padding: 10rpx 40rpx;background-color: #fff3f3;color: #aa3b2f;font-weight: 700;">意见反馈
						</view>
						<view class="radius40 padding-xs margin-right-sm font-11 juzhong"
							style="padding: 10rpx 40rpx;background-color: #fff3f3;color: #aa3b2f;font-weight: 700;">我要投诉
						</view>
					</view>
				</view>

			</view> -->

			<view class="margin-top-lg  font-40" style="font-weight: bold;padding-left: 30rpx;">
				了解品牌
			</view>

			<view class="bg-white radius40 margin-top-sm margin-lg">
				<view class="padding-lg radius40 "
					style="position: relative;background-color: #ffdcbc;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
					<view style="position: absolute;right: 40rpx;bottom: -20rpx;z-index: 0;">
						<image style="width: 300rpx;height: 300rpx;" src="/static/images/index/金融.png"></image>
					</view>
					<view class=" font-40" style="font-weight: 700;color: #e24e3e;">关于我们</view>
					<view style="display: flex;" class="margin-top-sm">
						<view class="radius40 "
							style="background-color: #e24e3e;color: #fff;border-bottom-left-radius: 0px;padding: 10rpx 40rpx;font-size: 20rpx;">
							了解详情<uni-icons type="right" color="#fff" size="10"></uni-icons>
						</view>
					</view>
					<view class="margin-top-xs"></view>


				</view>

				<view class="padding-lg juzhong" style="display: flex;">
					<view style="flex: 1;">
						<image style="width: 60rpx;height: 60rpx;" src="@/static/images/index/五角星.png"></image>
						<view style="font-weight: 700;">正规机构</view>
					</view>

					<view style="flex: 1;">
						<image style="width: 60rpx;height: 60rpx;" src="@/static/images/index/铜钱.png"></image>
						<view style="font-weight: 700;">息费透明</view>
					</view>

					<view style="flex: 1;">
						<image style="width: 60rpx;height: 60rpx;" src="@/static/images/index/安全 (2).png"></image>
						<view style="font-weight: 700;">信息安全</view>
					</view>
				</view>

			</view>


			<view class="margin-top-lg  font-40" style="font-weight: bold;padding-left: 30rpx;">
				其它操作
			</view>


			<view class="   margin-left-lg margin-top-lg flex">
				<view class="radius bg-white padding-sm margin-right-lg " style="" @click="handleBuilding">
					<view class="juzhong">
						<image src="@/static/images/my/组织.png" class="juzhong" style="width: 60rpx;height: 60rpx;">
						</image>
					</view>
					<view class="juzhong margin-top-xs">
						<view class="text  juzhong font-13">关于我们</view>
					</view>
				</view>
				<view class="radius bg-white padding-sm margin-right-lg " style="" @click="handleBuilding">
					<view class="juzhong">
						<image src="@/static/images/my/设置.png" class="juzhong" style="width: 60rpx;height: 60rpx;">
						</image>
					</view>
					<view class="juzhong margin-top-xs">
						<view class="text  juzhong font-13">应用设置</view>
					</view>
				</view>
				<view class="radius bg-white padding-sm margin-right-lg " style="" @click="handleBuilding">
					<view class="juzhong">
						<image src="@/static/images/my/客服.png" class="juzhong" style="width: 60rpx;height: 60rpx;">
						</image>
					</view>
					<view class="juzhong margin-top-xs">
						<view class="text  juzhong font-13">专属客服</view>
					</view>
				</view>
				<view class="radius bg-white padding-sm " style="" @click="handleLogout">
					<view class="juzhong">
						<image src="@/static/images/my/提示.png" class="juzhong" style="width: 60rpx;height: 60rpx;">
						</image>
					</view>
					<view class="juzhong margin-top-xs">
						<view class="text  juzhong font-13">退出登录</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'

	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				avatar: this.$store.state.user.avatar,
				appName: getApp().globalData.config.appInfo.name,
				version: getApp().globalData.config.appInfo.version
			}
		},
		computed: {
			phone() {
				return this.$store.state.user.phone
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onShow() {
			console.log(this.$store.state.user.phone);
		},
		methods: {
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：①133713780、②146013835')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {

			padding: 20rpx 15px 80rpx 15px;
			// background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;

				background-color: rgba(255, 255, 255, .9);

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	.content {
		position: absolute;

	}

	.guangyun1 {
		background: radial-gradient(ellipse at center, rgba(255, 129, 57, .15) 0%, rgba(187, 129, 57, .20) 0%, rgba(255, 129, 57, .2) 0%, rgba(0, 0, 0, 0) 65%);
		width: 1000rpx;
		height: 1000rpx;
		border-radius: 50%;
		margin-top: -500rpx;

	}
</style>